<template>
  <div>
    <div>
      <float-icons padding="10 10 60 10" class="icons-warp">
        <div v-if="roles.includes('smsk_admin')" class="float-icon-item">
          <img :src="currentDashboard === 'smskDashboard'?require('@/assets/images/dashboard/org.png'):require('@/assets/images/dashboard/org_1.png')" title="上门收款管理视图" @click="handleCommand('smskDashboard')">
          <span>上门收款</span>
        </div>
        <div v-if="roles.includes('user')" class="float-icon-item">
          <img :src="currentDashboard === 'userDashboard'?require('@/assets/images/dashboard/user.png'):require('@/assets/images/dashboard/user_1.png')" title="用户视图" @click="handleCommand('userDashboard')">
          <span>用户</span>
        </div>
      </float-icons>
    </div>
    <div class="dashboard-container">
      <component :is="currentDashboard" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import smskDashboard from '@/views/dashboard/smsk'
import userDashboard from '@/views/dashboard/user'
import floatIcons from '@/components/s-icons'

export default {
  name: 'Dashboard',
  components: { smskDashboard, userDashboard, 'float-icons': floatIcons },
  data() {
    return {
      currentDashboard: ''
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (this.roles.includes('smsk_admin')) {
      this.currentDashboard = 'smskDashboard'
    } else {
      this.currentDashboard = 'userDashboard'
    }
  },
  methods: {
    handleCommand(command) {
      this.currentDashboard = command
    }
  }
}
</script>
<style lang='scss' scoped>
.icons-warp {
 border-radius: 25px;
 .float-icon-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
 width: 50px;
 height: 50px;
 img {
  width: 25px;
  height: 25px;
  margin-bottom: 3px;
 }
 span {
  font-size: 9px;
  color: #666666;
 }
 }
}
</style>
